<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>学生</title>
  <link rel="stylesheet" href="./bootstrap/bootstrap.min.css" />
  <link rel="stylesheet" href="./bootstrap/bootstrap-icons.css" />
  <link rel="stylesheet" href="./css/common.css" />
  <style>
    .text {
      font-size: 12px;
      margin: 0;
      padding: 5px 20px;
      color: #999;
    }

    .card i:hover {
      cursor: pointer;
    }

    .bt-1 {
      margin-top: 4px;
    }

    .card-fluid {
      border: none;
      padding: 15px;
    }

    .card .table th {
      border-color: transparent;
    }

    .form-group {
      display: flex;
      align-items: center;
      height: calc(1.5em + 1.5rem + 2px);
    }

    .form-group>label {
      width: 100px;
      text-align: right;
      padding-right: 10px;
      margin-bottom: 0;
    }

    .form-group>input {
      flex: 1;
    }

    .form-group .input {
      flex: 1;
      padding-left: 10px;
      display: flex;
    }

    .form-group .form-check {
      margin-bottom: 0;
      margin-right: 30px;
    }

    .form-group .input select {
      width: 140px;
      margin-right: 20px;
    }

    .custom-select {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23999999' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
      background-size: 12px 12px;
    }
  </style>
</head>

<body class="application application-offset">
  <div class="container-fluid container-application">
    <div class="sidenav show" id="sidenav-main">
      <!-- Sidenav header -->
      <div class="sidenav-header d-flex align-items-center">
        <a class="navbar-brand" href="./index.html">
          <span class="logo">·ITCAST·</span>
        </a>
      </div>
      <!-- User mini profile -->
      <div class="sidenav-user d-flex flex-column align-items-center justify-content-between text-center">
        <!-- Avatar -->
        <div>
          <a href="#" class="avatar rounded-circle avatar-xl">
            <img alt="Image placeholder" src="https://yanxuan-item.nosdn.127.net/8b27deb1670c53e67c42ca3e1ed6fd12.jpg"
              class="" />
          </a>
          <div class="mt-5">
            <h5 class="mb-0 text-white">黑马前端</h5>
            <span class="d-block text-sm text-white opacity-8 mb-3">数据可视化</span>
            <a href="javascript:;" class="btn btn-sm btn-white btn-icon rounded-pill shadow hover-translate-y-n3">
              <span class="btn-inner--text">学前端来黑马</span>
            </a>
          </div>
        </div>
      </div>
      <!-- Application nav -->
      <div class="nav-application clearfix">
        <a href="./index.html" class="btn btn-square text-sm">
          <span class="btn-inner--icon d-block"><i class="bi bi-house bi-2x"></i></span>
          <span class="btn-inner--icon d-block pt-2">首页</span>
        </a>
        <a href="./student.html" class="btn btn-square text-sm active">
          <span class="btn-inner--icon d-block"><i class="bi bi-people bi-2x"></i></span>
          <span class="btn-inner--icon d-block pt-2">学生</span>
        </a>
        <a href="javascript:;" class="btn btn-square text-sm">
          <span class="btn-inner--icon d-block"><i class="bi bi-columns bi-2x"></i></span>
          <span class="btn-inner--icon d-block pt-2">排版</span>
        </a>
        <a href="javascript:;" class="btn btn-square text-sm">
          <span class="btn-inner--icon d-block"><i class="bi bi-files bi-2x"></i></span>
          <span class="btn-inner--icon d-block pt-2">资料</span>
        </a>
        <a href="javascript:;" class="btn btn-square text-sm">
          <span class="btn-inner--icon d-block"><i class="bi bi-receipt bi-2x"></i></span>
          <span class="btn-inner--icon d-block pt-2">就业</span>
        </a>
        <a href="javascript:;" class="btn btn-square text-sm">
          <span class="btn-inner--icon d-block"><i class="bi bi-gear bi-2x"></i></span>
          <span class="btn-inner--icon d-block pt-2">设置</span>
        </a>
      </div>
      <!-- Misc area -->
      <div class="card bg-gradient-warning">
        <div class="card-body">
          <h5 class="text-white">哈喽, 朋友!</h5>
          <p class="text-white mb-4">为什么不现在开始学习前端，创造一些令人惊叹的东西呢？</p>
          <a href="http://itcast.cn" class="btn btn-sm btn-block btn-white rounded-pill" target="_blank">Get started</a>
        </div>
      </div>
    </div>
    <div class="main-content position-relative">
      <nav class="navbar navbar-main navbar-expand-lg navbar-dark navbar-border" id="navbar-main">
        <div class="container-fluid">
          <!-- Navbar nav -->
          <div class="collapse navbar-collapse navbar-collapse-fade" id="navbar-main-collapse">
            <ul class="navbar-nav align-items-lg-center">
              <!-- Home  -->
              <li class="nav-item">
                <a class="nav-link pl-lg-0" href="./index.html"> 首页 </a>
              </li>
              <li class="nav-item">
                <a class="nav-link pl-lg-0" href="./index.html"> 传智教育 </a>
              </li>
              <li class="nav-item">
                <a class="nav-link pl-lg-0" href="./index.html"> 黑马程序员 </a>
              </li>
              <li class="nav-item">
                <a class="nav-link pl-lg-0" href="./index.html"> 文档 </a>
              </li>
            </ul>
            <!-- Right menu -->
            <ul class="navbar-nav ml-lg-auto align-items-center d-none d-lg-flex">
              <li class="nav-item dropdown dropdown-animate">
                <a class="nav-link pr-lg-0" href=".dropdown-menu" role="button" data-toggle="dropdown"
                  aria-haspopup="true" aria-expanded="false">
                  <div class="media media-pill align-items-center">
                    <span class="avatar rounded-circle">
                      <img alt="Image placeholder"
                        src="https://yanxuan-item.nosdn.127.net/8b27deb1670c53e67c42ca3e1ed6fd12.jpg" />
                    </span>
                    <div class="ml-2 d-none d-lg-block">
                      <span class="mb-0 text-sm font-weight-bold" id="username">Admin</span>
                    </div>
                  </div>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link pl-lg-0" id="logout" href="javascript:;"> 退出 </a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
      <div class="page-content">
        <div class="page-title mb-3">
          <div class="row justify-content-between align-items-center">
            <div class="col-md-6 mb-3 mb-md-0">
              <h5 class="h3 font-weight-400 mb-0 text-white">Students</h5>
              <span class="text-sm text-white opacity-8">一共有 <b class="total">0</b> 位学员</span>
            </div>
            <div class="col-md-6 d-flex align-items-center justify-content-between justify-content-md-end">
              <a id="openModal" href="javascript:;" class="btn btn-sm btn-white btn-icon-only rounded-circle ml-4">
                <span class="btn-inner--icon"><i class="bi bi-plus bi-2x" id="add"></i></span>
              </a>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <div class="card card-fluid">
              <div class="table-responsive" style="min-height: 1000px">
                <table class="table align-items-center">
                  <thead>
                    <tr>
                      <th>姓名</th>
                      <th>年龄</th>
                      <th>性别</th>
                      <th>组号</th>
                      <th>期望薪资</th>
                      <th>就业薪资</th>
                      <th>籍贯</th>
                      <th>操作</th>
                    </tr>
                  </thead>
                  <tbody class="list">
                    <!-- <tr>
                      <td>张杰</td>
                      <td>20</td>
                      <td>男</td>
                      <td>第2组</td>
                      <td>10000</td>
                      <td>13000</td>
                      <td>北京北京市东城区</td>
                      <td>
                        <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen"></i></a>
                        <a href="javascript:;" class="text-danger"><i class="bi bi-trash"></i></a>
                      </td>
                    </tr> -->
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
        <!-- footer -->
        <div class="footer pt-5 pb-4 footer-light" id="footer-main">
          <div class="row text-center text-sm-left align-items-sm-center">
            <div class="col-sm-6">
              <p class="text-sm mb-0">© 2022 <a href="https://itcast.cn" class="h6 text-sm" target="_blank">前端学科</a>.
                All rights reserved.</p>
            </div>
            <div class="col-sm-6 mb-md-0">
              <ul class="nav justify-content-center justify-content-md-end">
                <li class="nav-item">
                  <a class="nav-link" href="#">Support</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Terms</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link pr-0" href="#">Privacy</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- add Modal -->
  <div class="modal fade" id="modal">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">添加学员</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form id="form" class="g-3 row" autocomplete="off" novalidate>
            <div class="col-sm-6">
              <div class="form-group">
                <label class="input-group-label">姓名：</label>
                <input type="text" name="name" class="form-control" placeholder="请输入姓名" />
              </div>
            </div>
            <div class="col-sm-6">
              <div class="form-group">
                <label class="input-group-label">性别：</label>
                <div class="input">
                  <div class="form-check d-inline-block">
                    <input value="0" checked id="cb01" class="form-check-input" type="radio" name="gender" />
                    <label for="cb01" class="form-check-label">男</label>
                  </div>
                  <div class="form-check d-inline-block">
                    <input value="1" id="cb02" class="form-check-input" type="radio" name="gender" />
                    <label for="cb02" class="form-check-label">女</label>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-sm-6">
              <div class="form-group">
                <label class="input-group-label">年龄：</label>
                <input type="text" name="age" class="form-control" placeholder="请输入年龄" />
              </div>
            </div>
            <div class="col-sm-6">
              <div class="form-group">
                <label class="input-group-label">组号：</label>
                <input type="text" name="group" class="form-control" placeholder="请输入1-8组号" />
              </div>
            </div>
            <div class="col-sm-6">
              <div class="form-group">
                <label class="input-group-label">期望薪资：</label>
                <input type="text" name="hope_salary" class="form-control" placeholder="请输入期望薪资" />
              </div>
            </div>
            <div class="col-sm-6">
              <div class="form-group">
                <label class="input-group-label">就业薪资：</label>
                <input type="text" name="salary" class="form-control" placeholder="请输入就业薪资" />
              </div>
            </div>
            <div class="col-sm-12">
              <div class="form-group">
                <label class="input-group-label">籍贯：</label>
                <div class="input pl-0">
                  <select class="form-select custom-select" name="province">
                    <option value="">--省份--</option>
                  </select>
                  <select class="form-select custom-select" name="city">
                    <option value="">--城市--</option>
                  </select>
                  <select class="form-select custom-select" name="area">
                    <option value="">--地区--</option>
                  </select>
                </div>
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
          <button type="button" class="btn btn-blue" id="submit">确认</button>
        </div>
      </div>
    </div>
  </div>
  <!-- toast -->
  <div class="position-fixed top-0 start-50 pt-4" style="z-index: 999; transform: translateX(-50%)">
    <div id="myToast" class="toast bg-rgba">
      <div class="toast-body">提示消息</div>
    </div>
  </div>
  <script src="./bootstrap/bootstrap.min.js"></script>
  <script src="./lib/axios.js"></script>
  <script src="./lib/form-serialize.js"></script>
  <script src="./js/common.js"></script>
  <script>

    /*
    什么情况下 才可以让用户直接访问 index.html
      用户登录了 才可以访问 index.html
      如果用户没有登录 不允许用户直接访问 index.html 应该让页面跳转 登录页面
      只要登录成功 本地存储里面 有 token 
      判断 是否有 token 
  */

    const token = localStorage.getItem('CMS85')

    if (!token) {
      location.href = './login.html'
    }

    /*
    退出功能
      1. 获取 「退出」 dom元素 注册点击事件
      2. 需要给用户 展示 确认对话框 confirm()
      3. 需要跳转 登录页面 清空 本地存储
    */
    // 1. 获取 「退出」 dom元素 注册点击事件
    document.querySelector('#logout').addEventListener('click', function () {
      if (confirm('确认要退出吗？')) {
        location.href = './login.html'
        localStorage.clear()
      }
    })

    /*
     1. 显示登录的用户
       1.1 获取本地存储里面的 CMS-USERNAME 的值
       1.2 获取 id=username 的 dom 元素 
    */

    const username = localStorage.getItem('CMS-USERNAME')
    document.querySelector('#username').innerHTML = username
  </script>
  <script>
    /*
      1. 显示学生
        1.1 需要发送ajax 获取所有的学生 建议封装函数 initData() getStudentList()
        1.2 渲染数据
    */

    // 获取tbody
    const tbody = document.querySelector('tbody.list')

    const getStudentList = () => {
      axios({
        url: '/students'
      }).then(res => {
        // console.log(res)
        // 显示总共有多少个学生
        document.querySelector('.total').innerHTML = res.data.length
        // 渲染数据
        tbody.innerHTML = res.data.map(item => `
        <tr>
          <td>${item.name}</td>
          <td>${item.age}</td>
          <td>${item.gender === 0 ? '男' : '女'}</td>
          <td>第${item.group}组</td>
          <td>${item.hope_salary}</td>
          <td>${item.salary}</td>
          <td>${item.province + item.city + item.area}</td>
          <td>
            <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen" data-id="${item.id}"></i></a>
            <a href="javascript:;" class="text-danger"><i class="bi bi-trash" data-id="${item.id}"></i></a>
          </td>
        </tr>
        
        `).join('')
      })
    }
    getStudentList()

    /*
      2. 删除功能
        2.1 需要给 tbody 注册事件 需要采用事件委托的形式
        2.2 判断 是不是 删除 借助于类名
        2.3 提示用户 是否确认要删除
        2.4 发送ajax 给 服务器 注意请求方式与参数的位置 需要获取自定义属性的值
        2.5 成功 需要重新渲染页面
    */
    /*
    编辑功能 - 数据回显
      1. 点击编辑按钮 注册事件 但是 需要给 tbody 进行事件委托 复用 删除
      2. 判断 是否点击的是 编辑的按钮 dom对象.classList.contains('类名')
      3. 显示模态框
      4. 修改标题的文字
      5. 发送ajax 根据 id 获取学生的详情数据
      6. 数据回显  有难度 性别 省市区 数据回显
  */

    const title = document.querySelector('.modal-title')

    tbody.addEventListener('click', function (e) {
      // 删除功能
      if (e.target.classList.contains('bi-trash')) {
        if (confirm('您真的要删除嘛？')) {
          axios({
            url: `/students/${e.target.dataset.id}`,
            method: 'delete'
          }).then(res => {
            show('删除成功')
            getStudentList()
          }).catch(err => {
            show(err.response.data.message)
          })
        }
      }
      // 编辑功能 - 数据回显
      if (e.target.classList.contains('bi-pen')) {
        // 给模态框的 确定按钮添加自定义属性
        document.querySelector('#submit').dataset.id = e.target.dataset.id
        // 显示模态框
        myModal.show()
        // 修改标题的文字
        title.innerHTML = '编辑学员'
        // 发送ajax 根据 id 获取学生的详情数据
        // null undefined NaN 0 '' -0 false ----> false 
        axios.get(`/students/${e.target.dataset.id}`).then(res => {
          // 数据回显 利用 for...in 遍历对象
          for (let k in res.data) {
            // 根据 k 利用 属性选择器 获取 dom 元素 
            // document.querySelector(`[name=${k}]`).value = res.data[k]
            // 先 k 利用 属性选择器 获取 dom 元素 
            const dom = document.querySelector(`[name=${k}]`)
            // dom 变量 对象 | null 
            // 问：想要在 这个 if 语句 里面 将 性别 排除？
            if (dom && k !== 'gender') {
              document.querySelector(`[name=${k}]`).value = res.data[k]
            }
            // console.log(res.data.gender)
          }

          // 根据 服务器响应回来的数据 确定是哪一个 单选框选择 
          // console.log(res.data.gender)
          if (res.data.gender === 0) {
            document.querySelector('#cb01').checked = true
          } else {
            document.querySelector('#cb02').checked = true
          }

          // console.log();
          const cityName = res.data.city // 获取对应的城市
          const areaName = res.data.area // 获取对应的区县

          // 1. 先发送 ajax 请求 省份 获取到 所有的市
          // 2. 在显示对应的市
          // axios get 请求 有参数 需要 写在  params: 

          axios({
            url: '/api/city',
            params: {
              pname: res.data.province
            }
          }).then(res => {
            city.innerHTML = '<option>--城市--</option>'
            // console.log(res)
            city.innerHTML += res.data.map(item => `<option value="${item}">${item}</option>`).join('')

            city.value = cityName
            // console.log(res.data.city)
          })

          // 1. 先发送 ajax 请求 城市 获取到 所有区县
          // 2. 在显示对应的区县

          axios({
            url: '/api/area',
            params: {
              pname: res.data.province, // 省份的名字
              cname: cityName // 城市的名字
            }
          }).then(res => {
            area.innerHTML = '<option>--区县--</option>'
            // console.log(res)
            area.innerHTML += res.data.map(item => `<option value="${item}">${item}</option>`).join('')

            area.value = areaName
            // console.log(res.data.city)

          })


        })
      }
    })

    /*
      3. 添加功能
        3.1 点击 + 按钮 显示模态框 (使用 bootstrap 获取模态框 调用show方法)
        3.2 给 确认按钮 注册点击事件 不需要阻止表单的默认行为
        3.3 收集表单的数据 难点 (省市区 三级联动) 封装函数 省市区 三级联动
    */
    // 获取模态框
    var myModal = new bootstrap.Modal(document.querySelector('#modal'), {
      keyboard: false
    })

    document.querySelector('#add').addEventListener('click', function () {
      // 显示模态框
      myModal.show()
      title.innerHTML = '添加学员'
      // 删除 确认按钮身上的自定义属性
      document.querySelector('#submit').removeAttribute('data-id')
    })

    // 封装函数 省市区 三级联动
    // 获取省份的 select 标签
    const pro = document.querySelector('[name="province"]')
    const city = document.querySelector('[name="city"]')
    const area = document.querySelector('[name="area"]')

    const initCity = () => {
      // 1. 显示省份 发送ajax 请求
      // 2. 显示所有的省份
      axios({
        url: '/api/province'
      }).then(res => {
        // console.log(res.data)
        // let a = 10
        // a += 20 // a = a + 20
        // option 标签的value 属性值 是给 服务器用的 中间的内容是给用户看的
        pro.innerHTML += res.data.map(item => `<option value="${item}">${item}</option>`).join('')
      })

      // 1.给 pro 省份 注册 change 事件
      // 2. 发送ajax 请求 获取指定省份的 城市列表
      pro.addEventListener('change', function () {
        city.innerHTML = '<option>--城市--</option>'
        area.innerHTML = '<option>--城市--</option>'
        axios({
          url: '/api/city',
          params: {
            pname: this.value
          }
        }).then(res => {
          city.innerHTML += res.data.map(item => `<option value="${item}">${item}</option>`).join('')
        })
      })
      // 1.给 city 省份 注册 change 事件
      // 2. 发送ajax 请求 获取指定省份的 区域列表
      city.addEventListener('change', function () {
        area.innerHTML = '<option>--城市--</option>'
        axios({
          url: '/api/area',
          params: {
            pname: pro.value,
            cname: this.value
          }
        }).then(res => {
          area.innerHTML += res.data.map(item => `<option value="${item}">${item}</option>`).join('')
        })
      })


    }

    initCity()

    // 直接给 close 按钮注册点击事件
    // document.querySelector('.btn-close').addEventListener('click', function(){
    //   document.querySelector('#form').reset()
    // })
    // 关闭模态框时 清空表单里面的数据
    // 获取模态框 dom元素
    var myModalEl = document.querySelector('#modal')
    // 给 模态框 dom元素 注册事件 当关闭模态框时 事件就会被触发
    myModalEl.addEventListener('hide.bs.modal', function () {
      // do something...
      // 清空表单
      document.querySelector('#form').reset()
    })

    // 添加功能
    // 获取到 确定按钮 注册点击事件
    // 收集表单数据

    document.querySelector('#submit').addEventListener('click', function () {
      // 获取表单的数据
      const data = serialize(document.querySelector('#form'), { hash: true })

      // 获取 确认按钮身上的自定义属性值
      const id = document.querySelector('#submit').dataset.id
      // return console.log(id)

      // age gender group hope_salary salary 应该都是 number 类型
      data.age = +data.age
      data.gender = +data.gender
      data.group = +data.group
      data.hope_salary = +data.hope_salary
      data.salary = +data.salary

      /*
        定义 url 和 method 变量
      */

      let url = '/students'
      let method = 'post'

      if (id) {
        // 编辑功能
        url = `/students/${id}`
        method = 'put'
      }

      // console.log(data)
      // 发送ajax 请求
      axios({
        url,
        method,
        data
      }).then(res => {
        // 1. 重新渲染页面
        getStudentList()
        // 2. 关闭模态框
        myModal.hide()
        // 3. 提示用户
        show('学生添加成功')
      }).catch(err => {
        show(err.response.data.message)
      })
    })



  </script>
</body>

</html>